<template>
  <div class="container">
    <div class="app-container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-form class="demo-form-inline">
            <el-row>
              <el-col :span="6" class="a">
                <el-form-item label="员工姓名:">
                  <el-input v-model="pageParams.name" placeholder="请输入员工姓名" style="width:200px" size="mini" />
                </el-form-item>
              </el-col>

              <el-col :span="3">
                <el-form-item>
                  <el-button type="primary" size="mini" @click="inquire">查询</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div>
          <el-button type="primary" size="mini" @click="dialogVisible=true">添加员工</el-button>
        </div>
        <div class="fixel">
          <el-table :data="list">
            <el-table-column prop="id" align="center" width="80" label="序号" type="index" />
            <el-table-column prop="name" align="center" width="100" label="员工姓名" />
            <el-table-column prop="userName" align="center" width="150" label="登录账号" />
            <el-table-column prop="phonenumber" align="center" width="150" label="联系方式" />
            <el-table-column prop="roleName" align="center" width="150" label="角色" />
            <el-table-column prop="cardStatus" align="center" width="100" label="状态">
              <template v-slot="{ row }">
                <span v-if="row.status === 0">未启用</span>
                <span v-else-if="row.status === 1">启用</span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" align="center" width="160" label="添加时间" />

            <el-table-column label="操作" width="200">
              <template v-slot="{ row }">
                <el-button size="mini" type="text" @click="compile(row)">编辑</el-button>
                <el-button size="mini" type="text" @click="del(row.id)">删除</el-button>
                <el-button size="mini" type="text" @click="resetPasswords(row.id)">重置密码</el-button>
              </template>
            </el-table-column>
          </el-table>

        </div>
        <div class="block">
          <el-pagination
            :current-page="pageParams.page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="10"
            layout="total,  prev, pager, next,sizes "
            :total="pageParams.total"
            @size-change="currentChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="40%"
    >
      <el-form ref="formData" :model="formData" :rules="rules" label-width="100px" class="demo-ruleForm" label-position="top">
        <el-form-item label="员工姓名:" prop="name">
          <el-input v-model="formData.name" style="width:25vw" />
        </el-form-item>
        <el-form-item label="登录账号:" prop="userName">
          <el-input v-model="formData.userName" style="width:25vw" />
        </el-form-item>
        <el-form-item label="联系方式:" prop="phonenumber">
          <el-input v-model="formData.phonenumber" style="width:25vw" />
        </el-form-item>
        <el-form-item>
          <span>默认密码:123456</span>
        </el-form-item>

        <el-form-item label="分配角色" prop="roleId">
          <el-select
            v-model="formData.roleId"
            placeholder="请选择分配角色"
            style="width:25vw"
            size="medium"
            class="kuan"
          >
            <el-option
              v-for="(item,index) in pullDownList"
              :key="index"
              :label="item.roleName"
              :value="item.roleId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="员工状态" prop="status">
          <template>
            <el-radio v-model="formData.status" label="0">禁用</el-radio>
            <el-radio v-model="formData.status" label="1">启用</el-radio>
          </template>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { deleteParkSysUser, getSysUser, postParkSysUser, putParkSysUser, putParkSysUserResetPwd } from '@/api/systeManagement/staff'
export default {
  name: 'MonthCar',
  data() {
    return {
      list: [],
      pageParams: {
        page: 1, // 页数
        pageSize: 10, // 条数
        total: 0, // 总页数
        name: '' // 车主姓名
      },
      // 模态框
      dialogVisible: false,
      // 单选框
      radio: 2,
      formData: {
        name: '', // 员工姓名
        userName: '', // 登录账号
        roleId: '', // 用户的角色id
        status: '', // 停用状态 0未启用 1启用
        phonenumber: '', // 联系方式
        passwoed: '123456'
      },
      // 表单校验
      rules: {
        name: [
          { required: true, message: '请填写员工姓名', trigger: 'blur' }
        ],
        userName: [
          { required: true, message: '请填写登录账号', trigger: 'blur' }
        ],
        phonenumber: [
          { required: true, message: '请填写联系方式', trigger: 'blur' }
        ],
        roleId: [
          { required: true, message: '请选择分配角色', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择员工状态', trigger: 'blur' }
        ]

      },
      // 模态框标题
      title: '添加员工',
      // 下拉列表
      pullDownList: []

    }
  },

  async created() {
    this.getCardList()
    const res = await getSysUser()
    this.pullDownList = res.data.rows
  },
  methods: {
    // 渲染页面
    async getCardList() {
      const res = await getSysUser({ page: this.pageParams.page, pageSize: this.pageParams.pageSize })
      this.list = res.data.rows
      this.pageParams.total = res.data.total
    },
    // 模糊搜素
    async inquire() {
      const res = await getSysUser({ name: this.pageParams.name })
      this.list = res.data.rows
    },
    // 添加员工 和 编辑员工
    async submit() {
      // 表单校验
      this.$refs.formData.validate()
      if (this.title === '添加员工') {
        // 发送请求
        await postParkSysUser(this.formData)
        // 弹出提示
        this.$message.success('添加成功')
      } else if (this.title === '编辑员工') {
        delete this.formData.createTime
        // 发送请求
        await putParkSysUser(this.formData)
        // 弹出提示
        this.$message.success('编辑成功')
      }
      // 关闭模态框
      this.dialogVisible = false
      // 清空表单
      this.$refs.formData.resetFields()
      // 刷新数据
      this.getCardList()
    },
    // 编辑员工
    async compile(row) {
      this.title = '编辑员工'
      this.dialogVisible = true
      this.formData = row
    },
    // 删除员工
    async del(id) {
      this.$confirm('你确定删除信息吗,删除后将不可恢复?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await deleteParkSysUser(id)
        // 刷新数据
        this.getCardList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 重置密码
    resetPasswords(id) {
      this.$confirm('确定将密码重置为“123456”？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await putParkSysUserResetPwd(id)
        this.$message({
          type: 'success',
          message: '更改成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消更改'
        })
      })
    },

    // 当前页
    currentChange(page) {
      this.pageParams.page = page
      this.getAreaList()
    },
    // 每页数量
    handleCurrentChange(pageSize) {
      this.pageParams.pageSize = pageSize
      this.getAreaList()
    }

  }
}

</script>
<style scoped>
.a{
  margin-right: 10px;
}
.fixel{
display: flex;
justify-content:space-between;
}
.yanse{
  display: block;
  width: 500px;
  height: 40px;
  border: 1px solid #a6ddff;
  background-color: #e6f7ff;
  text-align: center;
  line-height: 40px;
}
.el-card .yanse{
  color: #1890ff !important;
}
.block{
float: right;
margin-top: 20px;
}
.demo-ruleForm{
  margin-left: 80px;
}
</style>

